<template>
	<view class="content bgc-f0 p26">
		<view class="p30 br12 bd1 z-flex fs32 c-333 t-c">
			<view class="flex-1">
				<view><text>客户数</text></view>
				<view class="fwb mt20 fs34"><text>121</text></view>
			</view>
			<view class="flex-1">
				<view><text>奖励数</text></view>
				<view class="fwb mt20 fs36"><text>16525.00</text></view>
			</view>
		</view>

		<view class="fs30 mt20 mb20">统计明细</view>

		<view class="br12 bgc-fff c-333 fs30 z-flex z-flex-between" style="flex-wrap: wrap;padding: 30rpx 30rpx 0;">
			<template v-for="(it,index) in list">
				<view class="_li bd1" :key="index" @click="handViewStore(it)">
					<view><text>{{it.name}}</text></view>
					<view class="fwb mt10"><text>{{detail[index] || '--'}}</text></view>
					<view class="_mx_btn mt20">查看明细</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: 'VIP总数',
						url: 'vipCount'
					},
					{
						name: 'VIP奖励汇总',
						url: 'vipReward'
					},
					{
						name: '待核销奖励汇总',
						url: 'toBeVerified'
					},
					{
						name: '已核销奖励汇总',
						url: 'verified'
					},
					{
						name: '交易汇总',
						url: 'transaction'
					},
					{
						name: '转介绍汇总',
						url: 'introduction'
					}
				],
				detail: []
			}
		},
		onShow() {

		},
		methods:{
			handViewStore({url}) {
				console.log(url,'12312')
				uni.$u.route({
					type: 'navigateTo',
					url: `mapPages/backAdmin/store_board/${url}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100vh;

		._li {
			border-radius: 15rpx;
			border-bottom-left-radius: 30rpx;
			width: 45%;
			height: auto;
			text-align: center;
			padding: 10rpx 0 10rpx 10rpx;
			margin-bottom: 30rpx;
			background: linear-gradient(to right, #6ec5bf, #a5f0e9);

			._mx_btn {
				font-size: 22rpx;
				background-color: #d8fffb;
				padding: 6rpx 12rpx;
				border-radius: 30rpx;
				width: 130rpx;
				text-align: center;
				transform: translateX(-50%);
				position: relative;
				left: 50%;
			}
		}
	}
</style>
